<template>
	<div class="content">
		<p style="height: 30rpx;"></p>
		<div class="nr_box">
			<div class="box">
				<p class="title">金额</p>
				<p class="text">¥199/月</p>
			</div>
			<div class="box">
				<p class="title">展示月数</p>
				<div class="text">
					<u-number-box button-size="20" v-model="value" @change="valChange"></u-number-box>
					月
				</div>
			</div>
			<div class="box">
				<p class="title">小计</p>
				<p class="text">¥199.00元</p>
			</div>
		</div>
		<div class="play_box">
			<p class="title">支付方式</p>
			<div class="radio-group-container">
				<radio-group v-model="selectedOption">
					<label class="radio-label" v-for="option in options" :key="option.value">
						<div class="text">
							<img :src="option.icon" alt="">
							{{ option.text }}
							<span v-if="option.isYe">(账户余额0.00元)</span>
						</div>
						<radio :value="option.value" />
					</label>
				</radio-group>
			</div>
			<u-button 
				:disabled="isDisable"
				loadingMode="circle"
				:loading="isDisable"
				loadingText="支付中..."
				type="primary" 
				text="确认支付"
			>
			</u-button>
			<p class="play_jl" @click="back">返回上一页</p>
		</div>
		<p style="height: 30rpx;"></p>
	</div>
</template>

<script>
	import { mapState ,mapActions} from 'vuex'
	import api from '@/api';
	export default {
		data() {
			return {
				options: [
					{ isYe:false,icon:'/static/wx_play.png',value: 'option1', text: '微信支付' },
					{ isYe:true,icon:'/static/ye_play.png',value: 'option2', text: '余额支付' },
					// 更多选项...
				],
			}
		},
		computed: {
		},
		onLoad() {
		},
		onShow(){
			
		},
		methods: {

			back(){
				uni.navigateBack({
					delta: 1
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	@mixin content-flex($pitch) {
		display: flex;
		align-items: center;
		justify-content:  $pitch;
	}
	.content{
		width: 100%;
		min-height: 100vh;
		background: #F7F7F7;
		.nr_box{
			padding:0 30rpx;
			margin:0 30rpx;
			background: #fff;
			border-radius: 15rpx;
			padding-bottom:50rpx;
			.box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom:1px solid #D8D8D8;
				padding:30rpx 0;
				.title{
					font-size:28rpx;
					color:#333;
					span{
						color:red;
					}
				}
				input{
					font-size:28rpx;
					flex: 1;
					text-align: right;
				}
				.text{
					display: flex;
					font-size:28rpx;
					color:#333;
					align-items: center;
				}
				
			}
		}
		.play_box{
			margin:24rpx 30rpx;
			.title{
				font-size:30rpx;
				color:#333;
				margin-bottom:30rpx;
			}
			.radio-group-container {
				display: flex;
				flex-direction: column;
				margin-bottom:30rpx;
				.radio-label {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10px; /* 根据需要调整间距 */
				}
				.text{
					font-size:30rpx;
					color:#333;
					display: flex;
					align-items: center;
					img{
						width: 40rpx;
						height: 40rpx;
						margin-right:10rpx;
					}
					span{
						color:#999;
						font-size:24rpx;
					}
				}
			}
			/deep/ .u-button{
                height: 96rpx;
                line-height: 96rpx;
                border-radius: 100rpx;
                background: #23AC39;
                text-align: center;
                font-weight: 500;
                color:#fff;
                border:none;
				text{
					font-size: 30rpx !important;
				}
            }
			.play_jl{
				text-align: center;
				color:#999999;
				font-size: 30rpx;
				font-weight: 500;
				margin-top:22rpx;
			}
		}
	}
</style>
